<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style_m.css" />
		<link rel="stylesheet" href="css/title_m.css" />
		<link rel="stylesheet" href="css/iconfont_m.css" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			body,.mui-content,.mui-table-view-cell{background:#1a1a1a;color:#fff;}
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			
			.mui-col-xs-3,
			.mui-col-xs-9 {
				overflow-y: auto;
				height: 100%;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 28%;
			}
			
			.mui-control-content {
				display: block;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}
			.mui-col-xs-9{width:100%;}
			.mui-content{margin-bottom:150px;}
			.mui-slider{height:300px;}
			.mui-slider-indicator .mui-active.mui-indicator{background-color:#FBED21;}/*轮播图当前显示原点颜色*/
			.mui-segmented-control.mui-segmented-control-inverted{width:60%;margin-left:20%;}/*设置顶部选项的宽度*/
			.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item{border:none;}/*顶部两项的下边框*/
			.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active{border-bottom:2px solid #f90;}/*被选中时的下边框*/
			.detail_top .mui-segmented-control{display: flex;flex-direction: row;justify-content: space-around;}/*顶部两项的排列方式*/
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{background:#1A1A1A;color:#f90;border-bottom:1px solid #f90;}/*顶部两项被选中时的样式*/
			#goods_detail{padding:10px;font-size:16px;color:#d8d8d8;line-height: 26px;}
			#goods_detail img{width:100%;}
			#goods_detail p{color:#d8d8d8;font-size:16px;margin:0;line-height: 26px;}
			/*客服*/
			.commodity-kefu{width: 200px;height: 80px;background: rgba(0,0,0,0.8);position: fixed;left: 50%;
				margin-left: -100px;top: 50%;margin-top: -40px;z-index: 999;}
			.commodity-kefu p{line-height: 45px;margin: 0;padding: 0;text-align: center;color: white;font-size: 18px;}
			.cancel{display: block;width: 99px;border-right:1px solid rgb(32,32,32);height: 35px;float: left;
				background: -webkit-linear-gradient(top,#fbed21,#fab538);text-align: center;line-height: 35px;color: black;}
			.cell{display: block;width: 100px;height: 35px;float: left;background: -webkit-linear-gradient(top,#fbed21,#fab538);text-align: center;
				line-height: 35px;color: black;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="goods_name1">泰国ANJERI睡眠面膜</h1>
		</header>
		<div class="mui-content mui-row mui-fullscreen">
			<div class="detail_top">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
					<a href="#content1" class="mui-control-item" data-index="0">商品</a>
					<a href="#content1" class="mui-control-item" data-index="1">详情</a>
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9">
				<div id="content1" class="mui-control-content">
					<!--轮播图-->
					<div id="slider" class="mui-slider" >
						<!--<div class="mui-slider-group mui-slider-loop">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img src="images/yuantiao.jpg">
								</a>
							</div>
							<!-- 第一张 --
							<div class="mui-slider-item">
								<a href="#">
									<img src="images/shuijiao.jpg">
								</a>
							</div>
							<!-- 第二张 --
							<div class="mui-slider-item">
								<a href="#">
									<img src="images/muwu.jpg">
								</a>
							</div>
							<!-- 第三张 --
							<div class="mui-slider-item">
								<a href="#">
									<img src="images/cbd.jpg">
								</a>
							</div>
							<!-- 第四张 --
							<div class="mui-slider-item">
								<a href="#">
									<img src="images/yuantiao.jpg">
								</a>
							</div>
							<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) ->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img src="images/shuijiao.jpg">
								</a>
							</div>
						</div>
						<div class="mui-slider-indicator">
							<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
						</div>
						-->
					</div>
					<!--轮播图结束-->
					<!--商品标题-->
					<div class="pro_title mr10">
						<p id="goods_name">泰国ANJERI睡眠面膜</p>
						<h2 class="mui-pull-left">￥<b id="shop_price">180.00</b></h2>
						<div class="mui-pull-right">
							<span><font>快递费</font >:<b id="shipping_price"></b></span>
							<span><font>库存</font>:<b id="store_count"></b></span>
						</div>
					</div>
					<div style="clear:both;"></div>
				</div>
				<div id="goods_detail" class="mui-control-content">
					
						<!--<img src="images/cbd.jpg"/>
						<p>这里是图片描述</p>
						这里是商品描述，或者也可以说这里是图片描述，都可以吧，反正都是我的商品，我想要的就买下来就可以了，嗯。-->
				</div>
			</div>
		</div>
		
		<!--底部购买菜单-->
		<div class="detail_bottom">
			<div class="shop_left">
				<a href="javascript:;"><span class="iconfont icon-icon9"></span></a>
				<span style="margin:0 10px;">|</span>
				<a href="javascript:;" id="do_tel"><span class="iconfont icon-kefu"></span></a>
			</div>
			<!--客服-->
			<div class="commodity-kefu" id="show_tel" style="display:none;">
				<p id="service_tel"><!--135 0000 8888--></p>
				<div>
					<a class="cancel" lang>取 消</a>
					<a class="cell" lang>呼 叫</a>
				</div>
			</div>
			<!--客服-->
			<div class="shop_right mui-button-group">
				<button class="mui-btn gouwuche">加入购物车</button>
				<button class="mui-btn goumai" id="do_buy">立即购买</button>
			</div>
		</div>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var controls = document.getElementById("segmentedControls");
			var contents = document.getElementById("segmentedControlContents");
			var html = [];
			/*var i = 1,
				j = 1,
				m = 4, //左侧选项卡数量+1
				n = 21; //每个选项卡列表数量+1
			/*for (; i < m; i++) {
				html.push('<a class="mui-control-item" data-index="' + (i - 1) + '" href="#content' + i + '">选项' + i + '</a>');
			}
			controls.innerHTML = html.join('');
			html = [];
			for (i = 1; i < m; i++) {
				html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
				for (j = 1; j < n; j++) {
					html.push('<li class="mui-table-view-cell">第' + i + '个选项卡子项-' + j + '</li>');
				}
				html.push('</ul></div>');
			}
			contents.innerHTML = html.join('');*/
			//默认选中第一个
			controls.querySelector('.mui-control-item').classList.add('mui-active');
//			contents.querySelector('.mui-control-content').classList.add('mui-active');
			(function() {
				var controlsElem = document.getElementById("segmentedControls");
				var contentsElem = document.getElementById("segmentedControlContents");
				var controlListElem = controlsElem.querySelectorAll('.mui-control-item');
				var contentListElem = contentsElem.querySelectorAll('.mui-control-content');
				var controlWrapperElem = controlsElem.parentNode;
				var controlWrapperHeight = controlWrapperElem.offsetHeight;
				var controlMaxScroll = controlWrapperElem.scrollHeight - controlWrapperHeight;//左侧类别最大可滚动高度
				var maxScroll = contentsElem.scrollHeight - contentsElem.offsetHeight;//右侧内容最大可滚动高度
				var controlHeight = controlListElem[0].offsetHeight;//左侧类别每一项的高度
				var controlTops = []; //存储control的scrollTop值
				var contentTops = [0]; //存储content的scrollTop值
				var length = contentListElem.length;
				for (var i = 0; i < length; i++) {
					controlTops.push(controlListElem[i].offsetTop + controlHeight);
				}
				for (var i = 1; i < length; i++) {
					var offsetTop = contentListElem[i].offsetTop;
					if (offsetTop + 100 >= maxScroll) {
						var height = Math.max(offsetTop + 100 - maxScroll, 100);
						var totalHeight = 0;
						var heights = [];
						for (var j = i; j < length; j++) {
							var offsetHeight = contentListElem[j].offsetHeight;
							totalHeight += offsetHeight;
							heights.push(totalHeight);
						}
						for (var m = 0, len = heights.length; m < len; m++) {
							contentTops.push(parseInt(maxScroll - (height - heights[m] / totalHeight * height)));
						}
						break;
					} else {
						contentTops.push(parseInt(offsetTop));
					}
				}
				contentsElem.addEventListener('scroll', function() {
					var scrollTop = contentsElem.scrollTop;
					for (var i = 0; i < length; i++) {
						var offsetTop = contentTops[i];
						var offset = Math.abs(offsetTop - scrollTop);
//						console.log("i:"+i+",scrollTop:"+scrollTop+",offsetTop:"+offsetTop+",offset:"+offset);
						if (scrollTop < offsetTop) {
							if (scrollTop >= maxScroll) {
								onScroll(length - 1);
							} else {
								onScroll(i - 1);
							}
							break;
						} else if (offset < 20) {
							onScroll(i);
							break;
						}else if(scrollTop >= maxScroll){
							onScroll(length - 1);
							break;
						}
					}
				});
				var lastIndex = 0;
				//监听content滚动
				var onScroll = function(index) {
					if (lastIndex !== index) {
						lastIndex = index;
						var lastActiveElem = controlsElem.querySelector('.mui-active');
						lastActiveElem && (lastActiveElem.classList.remove('mui-active'));
						var currentElem = controlsElem.querySelector('.mui-control-item:nth-child(' + (index + 1) + ')');
						currentElem.classList.add('mui-active');
						//简单处理左侧分类滚动，要么滚动到底，要么滚动到顶
						var controlScrollTop = controlWrapperElem.scrollTop;
						if (controlScrollTop + controlWrapperHeight < controlTops[index]) {
							controlWrapperElem.scrollTop = controlMaxScroll;
						} else if (controlScrollTop > controlTops[index] - controlHeight) {
							controlWrapperElem.scrollTop = 0;
						}
					}
				};
				//滚动到指定content
				var scrollTo = function(index) {
					contentsElem.scrollTop = contentTops[index];
				};
				mui(controlsElem).on('tap', '.mui-control-item', function(e) {
					scrollTo(this.getAttribute('data-index'));
					return false;
				});
			})();
		</script>
		<script type="text/javascript" charset="utf-8">
			var slider = mui("#slider");
					slider.slider({
						interval: 000
					});
		</script>
		
		<script src="../js/arttmpl.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/config.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/sockjs.js"></script>
		<script src="../js/md5.min.js"></script>
		<script src="../js/mui.pullToRefresh.js"></script>
		<script src="../js/mui.pullToRefresh.material.js"></script>
		<script src="../js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/details_m.js"></script>
	</body>

</html>